<template>
  <div id="editable-table-con">
    <g-banner :title="'可编辑列表'" :des="'点击表格的单元格可以编辑'"></g-banner>
    <a-affix :target="getScrollingCon">
      <div class="g-title-con">
        <h2 class="g-main-title">可编辑列表</h2>
      </div>
    </a-affix>
    <div class="g-box">
      <div class="toolbar">
        <div class="g-search-simple pull-left">
          <el-input placeholder="请输入内容" v-model="search" class="g-input-width">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
        <div class="pull-right">
          <el-dropdown split-button type="primary" @click="addLine" trigger="click" style="margin-right: 10px">
            <span>新增</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="add">弹框新增</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button type="primary" @click="save">保存</el-button>
          <el-button>重置</el-button>
        </div>
        <div class="clearfix"></div>
      </div>
      <!-- 可编辑表格 -->
      <elx-editable :data.sync="extendsTablePage" :edit-config="{trigger: 'click', mode: 'cell'}" ref="editable"
        :edit-rules="rules" stripe>
        <elx-editable-column type="selection" width="50" align="center"></elx-editable-column>
        <elx-editable-column type="index" label="序号" width="50" align="center"></elx-editable-column>
        <elx-editable-column prop="propName" label="属性名称" width="180"
          header-align="center"></elx-editable-column>
        <elx-editable-column prop="propKey" label="属性key" width="150" :edit-render="{name: 'ElInput'}" sortable
          header-align="center"></elx-editable-column>
        <elx-editable-column prop="sortBy" label="所属分类" width="150" :edit-render="{name: 'ElInput'}" sortable
          align="center"></elx-editable-column>
        <elx-editable-column prop="effectRange" label="作用范围" :edit-render="{name: 'ElInput'}" align="center">
        </elx-editable-column>
        <elx-editable-column prop="isShow" label="是否展示" :edit-render="{name: 'ElSelect', options: isShow}"
          align="center"></elx-editable-column>
        <elx-editable-column prop="showType" label="显示类型" :edit-render="{name: 'ElInput'}" align="center">
        </elx-editable-column>
        <elx-editable-column prop="order" label="排序" width="150" :edit-render="{name: 'ElInputNumber'}" sortable
          align="center"></elx-editable-column>
        <elx-editable-column label="操作" align="center">
          <div slot-scope="scope" class="g-operation-column">
            <el-dropdown trigger="click" :key="scope.$index">
              <el-button type="text">更多</el-button>
              <el-dropdown-menu slot="dropdown" style="transform: translateY(-15px)">
                <el-dropdown-item>监听查询</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>&nbsp;
            <el-button type="text" @click="deleteLine(scope.row)">删除</el-button>&nbsp;
          </div>
        </elx-editable-column>
      </elx-editable>
    </div>
    <!-- 分页栏 -->
    <el-pagination class="pull-right" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="pagination.currentPage" :page-sizes="[5, 10, 25]" background :page-size="pagination.pageSize"
      :pager-count="5" layout="total, sizes, prev, pager, next, jumper" :hide-on-single-page="false"
      :total="pagination.total">
    </el-pagination>
    <div style="clear: both"></div>
    <!-- 弹框 -->
    <el-dialog title="添加扩展信息" class="g-dialog" :visible.sync="addDialogVisiable" width="800px"
      :before-close="handleClose">
      <el-form :rules="rules" :model="input" ref="input" label-width="100px">
        <div class="g-form-block-grid">
          <el-form-item label="属性名称" prop="propName">
            <el-input v-model="input.propName" placeholder="请输入属性名称"></el-input>
          </el-form-item>
          <el-form-item label="属性key" prop="propKey">
            <el-input v-model="input.propKey" placeholder="请输入属性key"></el-input>
          </el-form-item>
          <el-form-item label="所属分类" prop="sortBy">
            <el-input v-model="input.sortBy" placeholder="请输入所属分类"></el-input>
          </el-form-item>
          <el-form-item label="作用范围" prop="effectRange">
            <el-input v-model="input.effectRange" placeholder="请输入作用范围"></el-input>
          </el-form-item>
        </div>
        <div class="g-form-block-grid">
          <el-form-item label="是否展示" prop="isShow">
            <el-switch v-model="input.isShow" active-text="是" inactive-text="否"></el-switch>
          </el-form-item>
          <el-form-item label="显示类型" prop="showType">
            <el-input v-model="input.showType" placeholder="请输入显示类型"></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="order">
            <el-input v-model="input.order" type="number"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="reset('input')">清空</el-button>
        <el-button type="primary" @click="submit('input')">确定</el-button>
      </span>
    </el-dialog>
    <!-- 需求可编辑表格点击可以弹框 -->
    <select-person-dialog :dialog-visible="personDialogVisible" @get-person="handleGetPerson"
      :before-close="handlePersonDialogClose"></select-person-dialog>
  </div>
</template>
<script>
import { getEditableTableData } from '@/api/table'
import $ from 'jquery'
import Vue from 'vue'
import VueElementExtends from 'vue-element-extends'
import 'vue-element-extends/lib/index.css'
import SelectPersonDialog from '@/views/common/SelectPersonDialog'
import { getScrollingCon } from '@/util/common'

Vue.use(VueElementExtends)
export default {
  data() {
    return {
      search: '', //搜索框内容
      addDialogVisiable: false, //添加框可见
      pagination: {
        currentPage: 1,
        total: 1,
        pageSize: 10
      }, //分页当前页，总条数，每页显示的条数
      input: {
        propName: '',
        propKey: '',
        sortBy: '',
        effectRange: '',
        isShow: true,
        showType: '',
        order: 1
      }, //添加窗口属性名称，属性key，所属分类，作用范围，是否展示，显示类型，排序
      rules: {
        propName: [{
          required: true,
          message: '请输入属性名称',
          trigger: 'blur'
        }],
        propKey: [{
          required: true,
          message: '请输入属性Key',
          trigger: 'blur'
        }],
        sortBy: [{
          required: true,
          message: '请输入所属分类',
          trigger: 'blur'
        }],
        effectRange: [{
          required: true,
          message: '请输入作用范围',
          trigger: 'blur'
        }],
        isShow: [{
          required: true,
          message: '请选择',
          trigger: 'blur'
        }],
        showType: [{
          required: true,
          message: '请输入显示类型',
          trigger: 'blur'
        }],
        order: [{
          required: true,
          message: '请输入顺序',
          trigger: 'blur'
        }]
      }, //数据验证，按照elementUI中form的要求
      isShow: [{
          value: '是',
          label: '是'
        },
        {
          value: '否',
          label: '否'
        }
      ], //是否展示列表
      extendsTable: [], //表格数据,
      extendsTablePage: [],
      personDialogVisible: false
    }
  },
  components: {
    SelectPersonDialog,
  },
  //点击分页栏上的页码或每页显示数量会导致currentPage改变，监控该属性，模拟一个后端分页
  watch: {
    //监视页码动态，向表格传送所需页面的数据
    'pagination.currentPage': function (newVal, oldVal) {
      this.extendsTablePage = this.extendsTable.slice((this.pagination.currentPage - 1) * this.pagination
        .pageSize, this.pagination.currentPage * this.pagination.pageSize)
    },
    //监视每页显示数量，向表格传送所需页面的数据
    'pagination.pageSize': function (newVal, oldVal) {
      this.extendsTablePage = this.extendsTable.slice((this.pagination.currentPage - 1) * this.pagination
        .pageSize, this.pagination.currentPage * this.pagination.pageSize)
    },
  },
  methods: {
    getScrollingCon, 
    //显示新增窗口
    add() {
      this.addDialogVisiable = true
    },
    //在表格中添加一行
    addLine() {
      this.$refs.editable.insert({
        propName: '属性名'
      }).then(({
        row
      }) => {
        this.$refs.editable.setActiveCell(row, 'propName')
      })
    },
    //保存按钮
    save() {
      let insertData = this.$refs.editable.getInsertRecords()
      let updateData = this.$refs.editable.getUpdateRecords()
      //判断之前进行过修改或新增
      if (updateData.length == 0 && insertData.length == 0) {
        this.$message('没有更改任何数据')
        this.saveButtonShow = false
        return
      }
      console.log('修改数据')
      console.log(this.$refs.editable.getUpdateRecords())
      console.log('新增数据')
      console.log(this.$refs.editable.getInsertRecords())
      //检查数据有效性
      this.$refs.editable.validate((valid) => {
        if (valid == false) {
          this.$message({
            type: 'error',
            message: '请检查单元格'
          })
        } else {
          this.$message({
            type: 'success',
            message: '保存成功'
          })
        }
      })
    },
    //删除行
    deleteLine() {
      this.$confirm('是否删除该行？', '确定', {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

      }).catch(() => {

      })
    },
    //提交函数
    submit(formName) {
      //数据验证
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addDialogVisiable = false //将新增窗口关闭
          this.input = {
            propName: '',
            propKey: '',
            sortBy: '',
            effectRange: '',
            isShow: true,
            showType: '',
            order: 1
          } //将新增窗口内的input重置
          this.$message({
            type: 'success',
            message: '添加成功'
          })
        } else {
          this.$message({
            type: 'error',
            message: '请检查填写信息'
          })
          return false
        }
      })
    },
    //清空新增框中所有输入框
    reset(formName) {
      this.$message('已清空')
      this.$refs[formName].resetFields()
    },
    //控制每页显示的条数
    handleSizeChange(pageSize) {
      this.pagination.pageSize = pageSize
    },
    //控制当前页
    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage
    },
    //控制关闭新增窗口
    handleClose() {
      this.addDialogVisiable = false
    },
    //加载数据
    loadExtendsTable() {
      getEditableTableData().then((result) => {
        this.extendsTable = result.data.extendsTable
        this.pagination.total = this.extendsTable.length
        this.extendsTablePage = this.extendsTable.slice((this.pagination.currentPage - 1) * this.pagination
          .pageSize, this.pagination.currentPage * this.pagination.pageSize)
      })
    },
    handleDetail() {
      this.personDialogVisible = true
    },
    handlePersonDialogClose() {
      this.personDialogVisible = false
    },
    handleGetPerson(personInfo) {
      this.$message.info('姓名' + personInfo.name + ' 年龄' + personInfo.age)
    }
  },
  created() {
    this.loadExtendsTable()
  }
}
</script>